<template>
  <div class="best">
    <div class="title">最佳环保卫士</div>
    <div style="height: 395px">
      <div class="item active" style="margin-top: 10px">
        <span>排名</span>
        <span>用户</span>
        <span>回收</span>
        <span>处理</span>
      </div>
      <div
        v-for="(item, index) in 10"
        :class="['item', index % 2 == 0 ? '' : 'active']"
        :key="index"
      >
        <span style="color: #00ed3b">{{ index + 1 }}</span>
        <span>龚会婷</span>
        <span>19601</span>
        <span>982</span>
      </div>
    </div>

    <!--  -->
    <div class="title">最佳环保先锋</div>

    <div style="height: 409px">
      <div class="item active" style="margin-top: 10px">
        <span>排名</span>
        <span>用户</span>
        <span>申请再利用</span>
      </div>
      <div
        v-for="(item, index) in 10"
        :class="['item', index % 2 == 0 ? '' : 'active']"
        :key="index"
      >
        <span style="color: #00ed3b">{{ index + 1 }}</span>
        <span>龚会婷</span>
        <span>19601</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.best {
  width: 496px;
  height: 926px;
  .title {
    height: 66px;
    line-height: 66px;
    padding-left: 33px;
    font-weight: bold;
    font-size: 24px;
    color: #ffffff;
  }
  .item {
    margin-left: 24px;
    width: 406px;
    display: flex;
    height: 35px;
    line-height: 35px;

    span {
      flex: 1;
      text-align: center;
      color: #ffffff;
      font-size: 16px;
    }
  }

  .active {
    background: #101e5a;
  }
}
</style>